<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>留言墙－BHere</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script src="js/jquery-1.10.2.js"></script>
<script src="jquery.nested.js"></script>
<script src="makeboxes.js"></script>
<script src="/socket.io/socket.io.js"></script>            
</head>
<body style="overflow:hidden;">

<a class="btn" id="prepend" style="display:none;">next</a>
<div id="container">
</div>

<!-- 屏幕墙初始布局 -->
<div id="container11" style="display:none;">
  <div class="box size12">1</div>
  <div class="box size12">2</div>
  <div class="box size24">3</div>
  <div class="box size22">4</div>
  <div class="box size12">5</div>
  <div class="box size12">6</div>
  <div class="box size12">7</div>
  <div class="box size12">8</div>
  <div class="box size12">9</div>
  <div class="box size12">10</div>
</div>

<a class="btn" id="append" style="display:none;">Append</a>

<script type="text/javascript" >
//启动屏保模式时长,默认10s
  var span_sceensave = 10000;
//两次动画之间停留时间,默认5s
  var span_stay = 6000;
  var span_ani = 225;

//cfg
  var path_wallpaper;
  var path_upload;
  var uri_pics;
   
  var b_ss, timer_ss, timer_play;
  var pp1;
function nextFrame(p1){
  if(!span_ani)
    return;
  if(p1)
    pp1 = p1;
  else
    p1 = pp1;
    setTimeout(function(){
      var mt =window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
      $.each(p1, function (index, value) {
            var el = $(value['$el']);
            var top = el.position().top;
            //移除视窗之外的条，避免出现半拉子条
            if(top>mt 
            //|| (top>0 && el.hasClass('size24'))
            ){
              var el_img = el.children('img');
              var src = el_img.attr('src');
              //排除remark img
              if(src.indexOf(uri_pics+path_wallpaper)==0 
              || src.indexOf(uri_pics+path_upload)==0)
                pics_cache.push(el_img[0].pic);
              el.remove();
            }
        });
        $('#prepend').text('next');
        //一段时间无新pic,触发屏保模式
        if(!timer_ss && span_sceensave){
          timer_ss = setTimeout(function(){
            timer_play = setTimeout(function(){
              var boxes = makeBoxes(3);
              $('#container').prepend(boxes).nested('prepend',boxes);                
            },50);
          },span_sceensave);
        }
        if(timer_play){
              timer_play = setTimeout(function(){
              var boxes = makeBoxes(3);
              $('#container').prepend(boxes).nested('prepend',boxes);                
            },span_stay);
        }
    },span_ani);  
}

  $(function() { 
   var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
   
    $('#container').nested({
      //需要减去gutter间距
      minWidth: (w-60) / 6,
      resizeToFit: false,
      gutter: 10,
  animate: true,
  animationOptions: {   
    queue: true,
    speed: 100,
    duration: 100,
    complete: function(p1,p2){
      //remove boxes and cache img outside screen.
      //$('#container').removeOutItems();
      nextFrame(p1);
    }
  }
    }); 
    
    $('#prepend').click(function(){
      if($('#prepend').text().indexOf('...')!=-1)
        return false;
      $('#prepend').text('waiting...');
      var boxes = makeBoxes(3);
      $('#container').prepend(boxes).nested('prepend',boxes);
    })
    $('#append').click(function(){
      var boxes = makeBoxes();
      $('#container').append(boxes).nested('append',boxes);     
    })

  });


    var socket = io.connect(location.host);
    //请求后台配置
    socket.on('connect', function(data) {
      socket.emit('cfg');
    });
     //根据配置订阅图片目录
   socket.on('cfg', function(settings) {
      //console.log(data);
      path_wallpaper='/'+settings.pic_wallpaper;
      uri_pics = settings.uri_pics;
      path_upload = settings.bCheck ? '/'+settings.pic_upload+'/p':'/'+settings.pic_upload;
      socket.emit('join', [path_wallpaper,path_upload]);
    });
    socket.on('added', function(data) {
      //console.log('added:'+data);
      var pics=[];
      for(var i=0; i<data.length; i++){
        var furl = data[i].furl;
        if(furl.indexOf(uri_pics+path_wallpaper)==0 
        || furl.indexOf(uri_pics+path_upload)==0){
          pics.push(data[i]);
        }else{
          console.log(furl);
        }
      }
      if(pics.length==0)
        return false;
      //清除屏保模式计时
      if(timer_ss){
         clearTimeout(timer_ss);
         timer_ss=null;
      }
      if(timer_play){
         clearTimeout(timer_play);
         timer_play=null;
      }
      $('#prepend').text('waiting...');
      var boxes = makeBoxesByData(pics);
      $('#container').prepend(boxes).nested('prepend',boxes);
    });
			  
</script>
  
</body>
</html>    